<template>
    <div>
        <el-container style="height:100%">
            <cli-title-customer></cli-title-customer>
            <el-container style="height:100%">
                <el-main>
                    <div class="main">
                        <el-input placeholder="今天想要淘点什么？" v-model="searchBox" class="searchBox">
                        </el-input>
                        <el-button style="background-color: rgba(245,194,38,0.7)" slot="append" icon="el-icon-search" @click="search()"></el-button>
                        <product-list :list="1" :pro-list="proList"></product-list>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
    import POST from "../api/POST";
    import Cookie from "js-cookie";
    import ProductList from "../components/base/productList";
    import CliTitleCustomer from "../components/base/cliTitleCustomer";
    export default {
        components: {CliTitleCustomer, ProductList},
        data() {
            return {
                proList: [],
                queryItem: '',
                searchBox: this.$route.query.search
            }
        },
        created() {
            this.getDataList()
        },
        methods: {
            getDataList() {
                var routerParams = this.$route.query.search
                // 将数据放在当前组件的数据内
                this.queryItem = routerParams
                let data = {
                    token: Cookie.get('token'),
                    productname: this.queryItem
                }
                POST.queryPro(data).then(res => {
                    this.proList = res
                    console.log(res)
                })
            },
            search() {
                let data = {
                    token: Cookie.get('token'),
                    productname: this.searchBox
                }
                POST.queryPro(data).then(res => {
                    this.proList = res
                    console.log(res)
                })
            }
        }
    }
</script>
<style scope>
    .header-wrapper {
        width: 100%;
        height: 20%;
        background-color: rgb(22, 22, 22);
        position: fixed;
        overflow-y: hidden;
        z-index: 3;
    }
    .logo {
        float: left;
        margin-top: 5px;
    }
    .logoText {
        float: left;
        margin-top: 10px;
    }
    .main {
        width: 100%;
        position: absolute;
        right: 0;
        left: 0;
        top: 65px;
        margin: auto;
       text-align: center;
    }
    .searchBox {
        width: 40%;
        margin: 20px 0 40px 0;

    }
</style>
